<html>

<head>
    <title>作业题</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="app">
        <table border="1" cellspacing="0" width="100%">
            <tr align="center" style="background-color: rgba(220, 220, 220, 0.356);">
                <th>
                    <input type="checkbox" id="demo" @click="select()">
                </th>
                <td>姓名</td>
                <td>学号</td>
                <td>班级</td>
                <td>性别</td>
                <td>手机号</td>
                <td>最高学历</td>
                <td>违纪次数</td>
                <td>违纪扣分</td>
                <td>最后操作时间</td>
                <td>操作</td>
            </tr>
            <tr align="center" v-for="stu in students">
                <td><input type="checkbox" name="demoAll"></td>
                <td>{{stu.name}}</td>
                <td>{{stu.code}}</td>
                <td>{{stu.classes}}</td>
                <td>
                    <span v-show="stu.gender==1">男</span>
                    <span v-show="stu.gender==0">女</span>
                </td>
                <td>{{stu.phone}}</td>
                <td>
                    <span v-if="stu.education==1">高中</span>
                    <span v-else-if="stu.education==2">大专</span>
                    <span v-else-if="stu.education==3">本科</span>
                    <span v-else-if="stu.education==4">研究生</span>
                    <span v-else>未知</span>
                </td>
                <td>{{stu.count}}</td>
                <td>{{stu.deduct}}</td>
                <td>{{stu.updateTime}}</td>
                <td style="color: orange;">
                    编辑   违纪   删除
                </td>
            </tr>
        </table>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        methods: {
            select:function(){
                var inputObj = document.getElementById("demo");
                var inputObjs = document.getElementsByName("demoAll");

                if(inputObj.checked == true){
                    for(let i=0;i<inputObjs.length;i++){
                        inputObjs[i].checked=true;
                    }
                }else if(inputObj.checked == false){
                    for(let i=0;i<inputObjs.length;i++){
                        inputObjs[i].checked=false;
                    }
                }
            }
        },
        data: {
            students: [
                {
                    name: "张三",
                    code: "A220505001",
                    classes: "上海黑马JavaEE就业154期",
                    gender: 1,   //1:男   0:女    
                    phone: "1880909xxxx",
                    education: 3, //1:高中  2:大专  3:本科   4:研究生    5:未知
                    count: 1, //违纪次数
                    deduct: 5,  //违纪扣分
                    updateTime: "2022-09-01 12:12:12"
                },
                {
                    name: "李四",
                    code: "A220505002",
                    classes: "上海黑马JavaEE就业256期",
                    gender: 1,   //1:男   0:女    
                    phone: "1880909xxxx",
                    education: 2, //1:高中  2:大专  3:本科   4:研究生    5:未知
                    count: 0, //违纪次数
                    deduct: 0,  //违纪扣分
                    updateTime: "2022-09-01 12:12:12"
                },
                {
                    name: "李四",
                    code: "A220505002",
                    classes: "上海黑马JavaEE就业256期",
                    gender: 1,   //1:男   0:女    
                    phone: "1880909xxxx",
                    education: 2, //1:高中  2:大专  3:本科   4:研究生    5:未知
                    count: 0, //违纪次数
                    deduct: 0,  //违纪扣分
                    updateTime: "2022-09-01 12:12:12"
                },
                {
                    name: "李四",
                    code: "A220505002",
                    classes: "上海黑马JavaEE就业256期",
                    gender: 1,   //1:男   0:女    
                    phone: "1880909xxxx",
                    education: 2, //1:高中  2:大专  3:本科   4:研究生    5:未知
                    count: 0, //违纪次数
                    deduct: 0,  //违纪扣分
                    updateTime: "2022-09-01 12:12:12"
                },
                {
                    name: "李四",
                    code: "A220505002",
                    classes: "上海黑马JavaEE就业256期",
                    gender: 1,   //1:男   0:女    
                    phone: "1880909xxxx",
                    education: 2, //1:高中  2:大专  3:本科   4:研究生    5:未知
                    count: 0, //违纪次数
                    deduct: 0,  //违纪扣分
                    updateTime: "2022-09-01 12:12:12"
                },
                {
                    name: "李四",
                    code: "A220505002",
                    classes: "上海黑马JavaEE就业256期",
                    gender: 1,   //1:男   0:女    
                    phone: "1880909xxxx",
                    education: 2, //1:高中  2:大专  3:本科   4:研究生    5:未知
                    count: 0, //违纪次数
                    deduct: 0,  //违纪扣分
                    updateTime: "2022-09-01 12:12:12"
                },
                {
                    name: "李四",
                    code: "A220505002",
                    classes: "上海黑马JavaEE就业256期",
                    gender: 1,   //1:男   0:女    
                    phone: "1880909xxxx",
                    education: 2, //1:高中  2:大专  3:本科   4:研究生    5:未知
                    count: 0, //违纪次数
                    deduct: 0,  //违纪扣分
                    updateTime: "2022-09-01 12:12:12"
                },
                {
                    name: "李四",
                    code: "A220505002",
                    classes: "上海黑马JavaEE就业256期",
                    gender: 1,   //1:男   0:女    
                    phone: "1880909xxxx",
                    education: 2, //1:高中  2:大专  3:本科   4:研究生    5:未知
                    count: 0, //违纪次数
                    deduct: 0,  //违纪扣分
                    updateTime: "2022-09-01 12:12:12"
                },
            ]
        }
    });
</script>

</html>